import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  ActivityIndicator,
} from 'react-native';


const TimerMixin = require('react-timer-mixin');

const styles = StyleSheet.create({
  container: {
  	flexDirection:'column',
    flex: 1,
    paddingTop: 150,
    marginLeft: 10,
  },
   centering: {
    alignItems: 'center',
    justifyContent: 'center',
    padding: 8,
  },
});



const ToggleAnimatingActivityIndicator = React.createClass({
  mixins: [TimerMixin],

  getInitialState() {
    return {
      animating: true,
    };
  },

  setToggleTimeout() {
    this.setTimeout(() => {
      this.setState({animating: !this.state.animating});
      this.setToggleTimeout();
    }, 2000);
  },

  componentDidMount() {
    this.setToggleTimeout();
  },

  render() {
    return (
      <ActivityIndicator
        animating={this.state.animating}
        style={[styles.centering, {height: 80}]}
        size="large"
      />
    );
  }
});




class ActivityIndicatorTest extends Component {

	render(){
       return(
        	<View style = {styles.container}
        	 //是否要显示指示器，默认为true，表示显示。
        	 animating = {'true'}
        	 //滚轮的前景颜色（默认为灰色）
        	 color = {"#7cfc00"} 
        	 size = {'large'} >
        	  <ActivityIndicator>
        	  </ActivityIndicator>
              <View/>
        	  <ToggleAnimatingActivityIndicator/>
        	</View>
       );
	}
}





export default ActivityIndicatorTest;